<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
<script type="text/javascript" src="../js/layui/layui.js"></script>
</head>
<body>
		<div id="message_div" style="display: none;" >
		<form id="form_message" class="layui-form" lay-filter="message_filter"  style="hidden">
		<input id="id"   name="id" type="hidden"  >
			
			<div class="layui-form-item">
				<label class="layui-form-label">填入回复信息</label>
				<div class="layui-inline">
					<input id="messageCont" type="text" name="answer"  autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">回复时间</label>
				<div class="layui-inline">
					<input type="text" name="answerTime"  id="test1" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" id="anNiu" class="layui-btn" lay-submit=""
						lay-filter="upMessage">回复留言</button>
					
				</div>
			</div>
		</form>
	</div>



	<table id="demo" lay-filter="test"></table>
	
	<script type="text/html" id="titleTpl">
  
		
	 {{#  if(d.status == "未回复"){ }}
    		<a class="layui-btn layui-btn-normal layui-btn-mini" lay-event="edit">{{d.status}}</a>
 		 {{#  } else { }}
 		   {{d.status}}
 		 {{#  } }}

	</script>


	<script>
			var table,layer,$,form;
			layui.use(['table','form','layer','laydate'], function(){
			   table = layui.table;
			   layer=layui.layer;
			   $=layui.$;
			   form=layui.form;
			  	var laydate=layui.laydate;
			   
			   laydate.render({
				    elem: '#test1' //指定元素
				  });
				
			  
			  //第一个实例
			  table.render({
			    elem: '#demo'
			    ,url: '../getMessage' //数据接口
			    ,id:"message"
			    ,page: true //开启分页
			    ,cols: [[ //表头
			      {field: 'id', title: '留言编号'}
			      ,{field: 'messageName', title: '留言用户'}
			      ,{field: 'context', title: '留言内容'}
			      ,{field: 'conTime', title: '留言时间'} 
			      ,{field: 'phone', title: '手机号'}
			      ,{field: 'answerTime', title: '回复时间'}
			      ,{field: 'answer', title: '回复信息',templet: '#titleTpl'}
			    ]]
			  });
			  
			  form.on("submit(upMessage)",function(){
				  if ($("#messageCont").val()!='') {
					  $.post("../updateMessage",$("#form_message").serialize(),function(res){
							layer.msg(res.msg)
							if(res.code=="0"){
								layer.closeAll();
								table.reload("message");
							} 
						},"json")
					  
				} else {
					layer.msg("请填入回复信息!")

				}
					return false;
				})
			  
			

			    //监听工具条 
			    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			      var data = obj.data; //获得当前行数据
			      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
			     console.log();
			      if(layEvent === 'del'){ //删除
			        layer.confirm('真的删除行么', function(index){
			          obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
			          layer.close(index);
			          //向服务端发送删除指令
			        });
			      } else if(layEvent === 'edit'){ //回复
			        //do something
			        form.val("message_filter",data)
			        layer.open({
			        	type:1,
			        	content:$("#message_div"),
			        	area:['600px','600px']
			        })
			        
			        
			        
			        //同步更新缓存对应的值
			        obj.update({
			          username: '123'
			          ,title: 'xxx'
			        });
			      } else if(layEvent === 'LAYTABLE_TIPS'){
			        layer.alert('Hi，头部工具栏扩展的右侧图标。');
			      }
			    });
			  
			});
			</script>

</body>
</html>